<template>
  <div>
    <a-drawer :visible="visible" :title="modalTitle" width="60%" @close="handleClose">
      <a-card :bordered="false">
        <f-table ref="table" size="small" rowKey="invoiceUnitQuotaId" :columns="columns" :operator="operator" :params="queryParam" :api="api.biq" :autoLoad="true" :multiple="false">


        </f-table>
      </a-card>
    </a-drawer>
  </div>
</template>

<script>
import api from './js/api'

  export default {
    name: 'quota',
    components: {},
    data() {
      return {
        api: Object.assign(api, this.api),

        visible: false,
        title: '额度列表',
        userName: '',
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [

          {
            title: '年份',
            align: 'center',
            dataIndex: 'quotaYear'
          },

          {
            title: '月份',
            align: 'center',
            dataIndex: 'quotaMonth'
          },
          {
            title: '月总额度',
            align: 'center',
            dataIndex: 'totalQuota'
          },
          {
            title: '已用额度',
            align: 'center',
            dataIndex: 'useQuota'
          },
          {
            title: '剩余额度',
            align: 'center',
            dataIndex: 'residueQuota'
          },
          {
            title: '最大额度',
            align: 'center',
            dataIndex: 'maxQuota',
            width: '200px'
          }
        ],
        operator: []
      }
    },
    computed: {
      modalTitle: function() {
        return this.userName + '-' + this.title
      }
    },
    created() {

    },
    methods: {
      searchHandler(params) {
        this.$refs.table.refresh(true, params)
      },
      handleShow(data) {
        this.userName = ''
        this.visible = true
        this.userName = data.invoiceunitName
        this.queryParam.invoiceUnitId = data.invoiceUnitId
        this.$refs.table.refresh()
      },
      handleClose() {
        this.visible = false
      }


    }
  }
</script>
